<template>
  <div class="error-dialog">
    <el-dialog v-model="visibleDialog" title="设置项检查">
      <div class="ant-confirm-body">
        <el-icon style="color: rgb(242, 86, 67);font-size: 22px;vertical-align: bottom;"><i-ep-circle-close-filled /></el-icon>
        <span class="ant-confirm-title">当前无法发布</span>
        <div class="ant-confirm-content">
          <div>
            <p class="error-modal-desc">以下内容不完善，需进行修改</p>
            <div class="error-modal-list">
              <div v-for="(item,index) in list" :key="index" class="error-modal-item">
                <div class="error-modal-item-label">流程设计</div>
                <div class="error-modal-item-content">{{ item.name }} 未选择{{ item.type }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="visibleDialog = false">前往修改</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { computed } from 'vue'

export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:visible'],
  setup(props, { emit }) {
    const visibleDialog = computed({
      get() {
        return props.visible
      },
      set(val) {
        emit('update:visible', val)
      }
    })

    return {
      visibleDialog
    }
  }
}
</script>

<style lang="scss" scoped>
  .ant-confirm-body {
    .ant-confirm-title {
      font-weight: 500;
      font-size: 16px;
      line-height: 1.4;
      padding-left: 16px;
    }

    .ant-confirm-content {
      margin: 10px 38px;
      font-size: 14px;
    }

    &>.anticon {
      font-size: 22px;
      color: #f00;
    }

    .error-modal-desc {
      font-size: 13px;
      color: rgba(25, 31, 37, .56);
      line-height: 22px;
      margin-bottom: 14px;
    }

    .error-modal-list {
        height: 200px;
        overflow-y: auto;
        margin-right: -25px;
        padding-right: 25px;
    }

    .error-modal-item {
        padding: 10px 20px;
        line-height: 21px;
        background: #f6f6f6;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        border-radius: 4px;
    }

    .error-modal-item-label {
        flex: none;
        font-size: 15px;
        color: rgba(25, 31, 37, .56);
        padding-right: 10px;
    }

    .error-modal-item-content {
        text-align: right;
        flex: 1;
        font-size: 13px;
        color: #191f25;
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: center;
  }
  :deep(.ep-dialog__body) {
    padding: 20px;
  }
</style>
